<template>
	<view class="conatiner">
		<view class="header">
			<view class="title">活动标题</view>
			<input type="text" :value="titleval" @input="headleTitle" placeholder-class="input_title"
				placeholder="点击输入标题.." />
		</view>
		<view class="time_box">
			<view class="time_title">开放报名时间</view>
			<view class="selector_box">
				<!-- 开始时间 -->
				<view>
					<view class="item" :class="{'active':beginTime.year!==0}" @click="beginShow = true">
						{{beginTime.year===0?'0000-00-00 00:00':begin}}</view>
					<u-picker v-model="beginShow" mode="time" :params="params" @confirm="headleBegin"></u-picker>
				</view>
				<view class="division">...</view>
				<!-- 结束时间 -->
				<view>
					<view class="item" :class="{'active':finishTime.year!==0}" @click="finishShow = true">
						{{finishTime.year===0?'0000-00-00 00:00':finish}}</view>
					<u-picker v-model="finishShow" mode="time" :params="params" @confirm="headleFinish"></u-picker>
				</view>
			</view>
		</view>
		<!-- 上传封面 -->
		<view class="cover_box">
			<view class="cover_title">活动封面</view>
			<view class="cover_bg" v-if="!coverImg">
				<view class="cover_abs" @click="headleUpBanner">
					<view class="abs_top">
						<image src="/static/image/sc.png"></image>
						<view>上传图片</view>
					</view>
					<view>690px * 800px</view>
				</view>
			</view>
			<!-- 上传封面卡片区域 -->
			<view v-else class="cover_Img">
				<image :src="coverImg"></image>
				<view class="hint_box">
					<view>卡片(690*800)</view>
					<view @click="headleUpBanner">
						<image src="/static/image/cx.png"></image>
						<view>重新上传</view>
					</view>
				</view>
			</view>
			<view v-if="coverImg" class="cover_Img hint_nim">
				<image :src="bannerImg?bannerImg:coverImg" :mode="bannerImg?scaleToFill:center"></image>
				<view class="hint_box">
					<view>封面(690*400)</view>
					<view @click="headleCardImg">
						<image src="/static/image/cj.png"></image>
						<view>手动裁剪</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 活动介绍 -->
		<view class="introduce_box">
			<view class="title">
				活动介绍
			</view>
			<textarea @input="headleDescribe" :value="areaval" placeholder-style="color: rgba(0, 0, 0, 0.35);"
				placeholder="点击输入内容..." />
		</view>
		<!-- 奖项设置 -->
		<view style="margin-bottom: 400upx;">
			<view class="awards_box">
				<view class="title">奖项设置</view>
				<!-- 已添加奖项区域  -->
				<view v-if="awardsList.length">
					<view class="added_awards" v-for="(item,index) in awardsList" :key="index">
						<view class="added_header">
							<view>{{item.name}} {{item.quota}}名</view>
							<image src="/static/image/detele.png" @click="headleRemove(index)"></image>
						</view>
						<view class="added_con">{{item.content}}</view>
						<image :src="item.img"></image>
					</view>
				</view>
				<!-- 添加奖项区域 -->
				<view v-if="awardsShow" class="awards_content">
					<view class="awards_one">
						<view class="awards_name">奖项名称</view>
						<view class="awards_num">奖项数量</view>
					</view>
					<view class="awards_input">
						<input type="text" @input="headleRank" placeholder="奖状级别" />
						<input type="number" @input="headleNum" placeholder="输入数量" />
					</view>
					<view class="awards_con">
						<view class="title">奖品内容</view>
						<textarea @input="headleContent" placeholder="输入奖品内容..." />
					</view>
					<view class="awards_upimg" v-if="!awardsPicture">
						<view class="img_abs" @click="headlePicture">
							<view class="upimg_head">
								<image src="/static/image/sc.png"></image>
								<view>上传图片</view>
							</view>
							<view>650px * 310px</view>
						</view>
					</view>
					<view v-else class="upImg_cg">
						<image :src="awardsPicture"></image>
						<view class="abs_cg" @click="headlePicture">
							<image src="/static/image/cx.png"></image>
							<view>重新上传</view>
						</view>
					</view>
					<view class="bom_tag">
						<view class="cancel_cs" @click="awardsShow=false">取消</view>
						<view class="perform" @click="headleBone">完成</view>
					</view>

				</view>
			</view>
			<!-- 完成创建 -->
			<view class="add_btn" v-if="!awardsShow" @click="headleAddAwards">添加奖项</view>
		</view>

		<!-- 添加活动创建区域 -->
		<view class="finish_bom">
			<view class="back" @click="headleBack">
				<image src="/static/image/zf.png"></image>
			</view>
			<view class="bom" @click="headleSucceed">{{status?'保存修改':'完成创建'}}</view>
		</view>
		<!-- 修改活动区域 -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//日期时间参数
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				//获取到的开始日期时间
				beginTime: {
					year: 0,
					month: 0,
					day: 0,
					hour: 0,
					minute: 0,
				},
				//获取到的结束日期时间
				finishTime: {
					year: 0,
					month: 0,
					day: 0,
					hour: 0,
					minute: 0,
				},
				// 控制是否显示日期时间弹窗
				titleval: '', //保存修改的值
				areaval: '', //保存修改的值
				titleValues: '', //保存活动标题值
				beginShow: false, //控制开始时间底部弹窗
				finishShow: false, //控制结束时间底部弹窗
				describeValues: '', //保存活动介绍值
				coverImg: '', //保存上传的封面图/卡片
				bannerImg: '', ////保存上传的封面图 /封面 
				Uplink: '', //上传图片的路径 
				gradeValues: '', //保存奖项级别值
				numValues: '', //保存奖项数量
				contentValues: '', //保存奖项内容
				awardsPicture: '', ////保存奖项图片
				awardsList: [], //保存奖项数据列表
				awardsShow: true, //控制显示奖项列表 或添加奖项按钮
				detailsId: null, //保存修改活动详情id
				status: false
			}
		},
		onLoad(options) {
			this.Uplink = getApp().globalData.upHttp
			this.detailsId = options.id
			console.log(options)
			this.status = options.status
			this.getDetailList()
		},
		computed: {
			//开始时间
			begin() {
				return this.beginTime.year + '-' + this.beginTime.month + '-' + this.beginTime.day + ' ' + this.beginTime
					.hour +
					':' + this.beginTime.minute
			},
			//结束时间
			finish() {
				return this.finishTime.year + '-' + this.finishTime.month + '-' + this.finishTime.day + ' ' + this
					.finishTime.hour +
					':' + this.finishTime.minute
			}
		},
		methods: {
			//开始时间
			headleBegin(e) {
				this.beginTime = e
			},
			//结束时间
			headleFinish(e) {
				this.finishTime = e
			},

			//上传卡片/封面回调
			headleUpBanner() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						let tempFilePaths = res.tempFilePaths[0]
						uni.showLoading({
								title: '上传中...',
							}),
							uni.uploadFile({
								url: that.Uplink + 'admin/upload-img',
								filePath: tempFilePaths,
								name: 'imgFile',
								header: {
									'Authorization': uni.getStorageSync('token')
								},
								success(res) {
									let data = JSON.parse(res.data)
									if (data.code === 0) {
										that.coverImg = data.data.imgUrl
										uni.hideLoading()
									} else {
										uni.showToast({
											title: '文件格式错误',
											icon: 'none'
										})
										uni.hideLoading()
									}

								}
							})
					}
				})
			},

			///上传/封面回调 跳转到裁剪页
			headleCardImg() {
				uni.navigateTo({
					url: '../tailor/tailor?coverImg=' + this.coverImg
				})

			},

			// 获取输入的奖项级别
			headleRank(e) {
				this.gradeValues = e.detail.value
			},
			// 获取输入的奖项数量
			headleNum(e) {
				this.numValues = e.detail.value
			},
			// 获取输入的奖项介绍
			headleContent(e) {
				this.contentValues = e.detail.value
			},
			//上传奖项图片回调
			headlePicture() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						let tempFilePaths = res.tempFilePaths[0]
						uni.showLoading({
								title: '上传中...',
								icon: 'loading',
								mask: true
							}),
							uni.uploadFile({
								url: that.Uplink + 'admin/upload-img',
								filePath: tempFilePaths,
								name: 'imgFile',
								header: {
									// 'content-type': 'multipart/form-data',
									'Authorization': uni.getStorageSync('token')
								},
								success(res) {
									let data = JSON.parse(res.data)
									uni.hideLoading()
									if (data.code === 0) {
										that.awardsPicture = data.data.imgUrl
									}
								}
							})
					}
				})
			},

			//完成奖项设置
			headleBone() {
				if (this.gradeValues.trim() && this.numValues.trim() && this.contentValues.trim() && this.awardsPicture) {
					let obj = {
						name: this.gradeValues,
						quota: this.numValues,
						content: this.contentValues,
						img: this.awardsPicture
					}
					this.awardsList.push(obj)
					this.awardsShow = false
					return
				}
				uni.showToast({
					title: '都是必填项'
				})
			},

			// 添加奖项
			headleAddAwards() {
				this.awardsShow = true
				this.gradeValues = '' //保存奖项级别值
				this.numValues = '' //保存奖项数量
				this.contentValues = '' //保存奖项内容
				this.awardsPicture = '' ////保存奖项图片
			},


			// 删除奖项
			headleRemove(index) {
				this.awardsList.splice(index, 1)
			},
			// 获取输入的活动标题
			headleTitle(e) {
				this.titleValues = e.detail.value
			},
			// 获取输入的活动介绍
			headleDescribe(e) {
				this.describeValues = e.detail.value
			},
			// 完成创建回调
			headleSucceed() {
				if (!this.titleValues.trim()) {
					uni.showToast({
						title: '活动标题不能为空!',
						icon: 'none'
					})
					return
				}
				if (this.beginTime.year === 0 || this.finishTime.year === 0) {
					uni.showToast({
						title: '请填写活动开始时间和结束时间!',
						icon: 'none'
					})
					return
				}
				if (this.begin > this.finish) {
					uni.showToast({
						title: '活动开始时间不能大于结束时间!',
						icon: 'none'
					})
					return
				}
				if (!this.coverImg) {
					uni.showToast({
						title: '活动卡片不能为空!',
						icon: 'none'
					})
					return
				}
				if (!this.describeValues) {
					uni.showToast({
						title: '活动介绍不能为空!',
						icon: 'none'
					})
					return
				}
				if (this.awardsList.length < 1 || this.awardsList === null) {
					uni.showToast({
						title: '最少设置一个奖项',
						icon: 'none'
					})
					return
				}

				this.myRequesy({
					url: this.status ? 'admin/activity/update' : 'admin/activity/add',
					method: 'POST',
					data: {
						tag_id: this.detailsId,
						name: this.titleValues,
						describe: this.describeValues,
						banner: this.bannerImg ? this.bannerImg : this.coverImg,
						cardImg: this.coverImg,
						prize: this.awardsList,
						startTime: this.begin,
						endTime: this.finish
					}
				}).then(res => {
					if (res.data.code === 0) {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},

			// 获取修改活动详情数据
			getDetailList() {
				let that = this
				this.myRequesy({
					url: 'admin/activity/detail',
					data: {
						tag_id: this.detailsId
					}
				}).then(res => {
					console.log(res)
					if (res.data.code === 0) {
						that.titleValues = res.data.data.name //输入的标题
						that.titleval = res.data.data.name, //显示的标题
							that.describeValues = res.data.data.describe //输入的介绍 
						that.areaval = res.data.data.describe, //显示的介绍 
							that.bannerImg = res.data.data.banner,
							that.coverImg = res.data.data.cardImg,
							that.awardsList = res.data.data.prize
						// 切割开始时间
						that.beginTime = {
								year: res.data.data.startTime.slice(0, 4),
								month: res.data.data.startTime.slice(5, 7),
								day: res.data.data.startTime.slice(8, 10),
								hour: res.data.data.startTime.slice(11, 13),
								minute: res.data.data.startTime.slice(14, 16)
							},
							//切割结束时间
							that.finishTime = {
								year: res.data.data.endTime.slice(0, 4),
								month: res.data.data.endTime.slice(5, 7),
								day: res.data.data.endTime.slice(8, 10),
								hour: res.data.data.endTime.slice(11, 13),
								minute: res.data.data.endTime.slice(14, 16)
							}
					}
				})
			},

			// 取消修改返回
			headleBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.conatiner {
		padding: 30upx;


		.header {
			.title {
				color: rgba(0, 0, 0, 0.35);
				font-size: 14px;
			}

			.input_title {
				color: rgba(0, 0, 0, 0.35);
				font-size: 30upx;
			}

			input {
				width: 690upx;
				height: 100upx;
				border-radius: 16upx;
				background-color: rgba(251, 251, 251, 100);
				border: 2upx solid rgba(0, 0, 0, 0.05);
				box-sizing: border-box;
				padding-left: 30upx;
				margin: 20upx 0upx 40upx;
			}
		}

		.time_box {
			.time_title {
				color: rgba(0, 0, 0, 0.35);
				font-size: 28upx;
			}

			.selector_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: rgba(0, 0, 0, 0.35);
				margin: 20upx 0upx 38upx;

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 310upx;
					height: 90upx;
					border-radius: 16upx;
					background-color: rgba(251, 251, 251, 100);
					text-align: center;
					font-family: Arial;
					border: 2upx solid rgba(0, 0, 0, 0.05);
					box-sizing: border-box;
					font-size: 30upx;
				}

				.active {
					color: rgba(85, 119, 252, 100);
					font-weight: 600;
				}

				.division {
					letter-spacing: 3.5upx;
					font-weight: 36upx;
					font-weight: 600;
				}
			}
		}

		.cover_box {
			margin-bottom: 40upx;

			.cover_title {
				color: rgba(0, 0, 0, 0.35);
				font-size: 28upx;
				margin-bottom: 20upx;
			}

			.cover_bg {
				width: 690upx;
				height: 800upx;
				border-radius: 20upx;
				background-color: rgba(0, 0, 0, 0.05);
				margin-bottom: 20upx;
				position: relative;

				.cover_abs {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: rgba(0, 0, 0, 0.35);
					font-size: 26upx;

					.abs_top {
						display: flex;
						align-items: center;
						color: rgba(64, 64, 64, 100);
						font-size: 30upx;
						margin-bottom: 20upx;

						image {
							width: 42upx;
							height: 42upx;
							margin-right: 6upx;
						}
					}

				}
			}

			.cover_Img {
				position: relative;
				margin: 20upx 0upx 40upx;
				width: 690upx;
				height: 800upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20upx;
				}

				.hint_box {
					position: absolute;
					bottom: 0;
					right: 0;
					left: 0;
					width: 690upx;
					height: 100upx;
					line-height: 100upx;
					border-radius: 0px 0px 20upx 20upx;
					background-color: rgba(0, 0, 0, 0.75);
					text-align: center;
					color: rgba(255, 255, 255, 100);
					font-size: 28upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0upx 30upx;
					box-sizing: border-box;

					image {
						width: 40upx;
						height: 40upx;
						margin-right: 6upx;
					}

					view:last-child {
						display: flex;
						align-items: center;
					}
				}
			}

			.hint_nim {
				width: 690upx;
				height: 398upx;
				border-radius: 20upx;
			}
		}

		.introduce_box {
			.title {
				color: rgba(0, 0, 0, 0.35);
				font-size: 28upx;
			}

			textarea {
				width: 690upx;
				height: 400upx;
				line-height: 40upx;
				border-radius: 16upx;
				background-color: rgba(251, 251, 251, 100);
				color: rgba(64, 64, 64, 100);
				font-size: 30upx;
				border: 2upx solid rgba(0, 0, 0, 0.05);
				padding: 30upx;
				box-sizing: border-box;
				margin: 20upx 0upx 40upx;
			}
		}

		.awards_box {
			.title {
				color: rgba(0, 0, 0, 0.35);
				font-size: 28upx;
			}

			.awards_content {
				position: relative;
				margin-top: 20upx;
				width: 690upx;
				height: 896upx;
				line-height: 40upx;
				border-radius: 16upx;
				background-color: rgba(251, 251, 251, 100);
				border: 2upx solid rgba(0, 0, 0, 0.05);
				padding: 30upx 30upx 0upx 30upx;
				box-sizing: border-box;

				.awards_one {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-right: 50upx;
					font-size: 30upx;
					color: rgba(16, 16, 16, 100);

					.awards_name {
						font-weight: 600;
					}
				}

				.awards_input {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 20upx 0upx 32upx;

					input {
						border-radius: 12upx;
						box-shadow: 0px 0px 4upx 0px rgba(0, 0, 0, 0.15);
						box-sizing: border-box;
						background-color: #fff;
					}

					input:first-child {
						width: 430upx;
						height: 90upx;
						padding-left: 20upx;
					}

					input:last-child {
						width: 170upx;
						height: 90upx;
						padding-left: 26upx;

					}
				}

				.awards_con {
					.title {
						color: rgba(16, 16, 16, 100);
						font-size: 30upx;
						font-weight: 600;
					}

					textarea {
						width: 630upx;
						height: 140upx;
						border-radius: 12upx;
						box-shadow: 0px 0px 4upx 0px rgba(0, 0, 0, 0.15);
						padding: 24upx 20upx;
						box-sizing: border-box;
						background-color: #fff;
						margin: 20upx 0upx 30upx;
					}
				}

				.awards_upimg {
					width: 630upx;
					height: 310upx;
					border-radius: 12upx;
					background-color: rgba(0, 0, 0, 0.05);
					position: relative;

					.img_abs {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						color: rgba(0, 0, 0, 0.35);
						font-size: 26upx;

						.upimg_head {
							display: flex;
							align-items: center;
							margin-bottom: 20upx;
							color: rgba(0, 0, 0, 0.5);
							font-size: 30upx;

							image {
								width: 42upx;
								height: 42upx;
								margin-right: 8upx;

							}
						}

					}
				}

				.upImg_cg {
					width: 630upx;
					height: 310upx;
					position: relative;

					image {
						border-radius: 12upx;
						width: 100%;
						height: 100%;
					}

					.abs_cg {
						padding: 10upx 20upx;
						border-radius: 10upx;
						background-color: rgba(0, 0, 0, 0.5);
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						color: rgba(255, 255, 255, 100);
						font-size: 26upx;
						display: flex;
						align-items: center;

						image {
							width: 36upx;
							height: 36upx;
							margin-right: 4upx;
						}
					}
				}

				.bom_tag {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					width: 690upx;
					line-height: 100upx;
					font-size: 30upx;
					display: flex;
					justify-content: space-between;
				}

				.cancel_cs {
					width: 240upx;
					height: 100%;
					height: 100upx;
					text-align: center;
					background-color: rgba(210, 210, 210, 100);
					color: rgba(0, 0, 0, 0.5);
					border-radius: 0px 0px 0px 16upx;
				}

				.perform {
					width: 450upx;
					height: 100%;
					height: 100upx;
					text-align: center;
					background-color: rgba(85, 119, 252, 100);
					color: rgba(255, 255, 255, 100);
					border-radius: 0px 0px 16upx 0px;
				}
			}

			.added_awards {
				width: 690upx;
				height: 496upx;
				border-radius: 16upx;
				background-color: rgba(251, 251, 251, 100);
				padding: 30upx 20upx 30upx 30upx;
				box-sizing: border-box;
				border: 2upx solid rgba(0, 0, 0, 0.05);
				color: rgba(16, 16, 16, 100);
				font-size: 30upx;
				margin: 20upx 0;

				.added_header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 600;

					image {
						width: 36upx;
						height: 36upx;
					}
				}

				.added_con {
					margin: 10upx 0upx 30upx;
				}

				image {
					width: 100%;
					height: 312upx;
					border-radius: 12upx;
				}
			}
		}

		.add_btn {
			width: 690upx;
			height: 100upx;
			line-height: 100upx;
			border-radius: 16upx;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(85, 119, 252, 100);
			font-size: 30upx;
			text-align: center;
			border: 2upx solid rgba(85, 119, 252, 100);
			box-sizing: border-box;
			margin-top: 30upx;
		}

		.finish_bom {
			z-index: 111;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750upx;
			height: 122upx;
			padding: 0upx 30upx;
			box-sizing: border-box;
			border-radius: 30upx 30upx 0px 0px;
			background-color: rgba(255, 255, 255, 100);
			text-align: center;
			box-shadow: 0px -2upx 2upx 0px rgba(0, 0, 0, 0.1);

			.back {
				width: 90upx;
				height: 90upx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				background-color: rgba(64, 64, 64, 100);
				color: rgba(255, 255, 255, 100);
				text-align: center;
				box-shadow: 0px 0px 4upx 0px rgba(64, 64, 64, 100);
				border: 2upx solid rgba(0, 0, 0, 0.1);
				box-sizing: border-box;

				image {
					width: 42upx;
					height: 42upx;
				}
			}

			.bom {
				width: 580upx;
				height: 90upx;
				line-height: 90upx;
				border-radius: 50upx;
				background-color: rgba(85, 119, 252, 100);
				color: rgba(255, 255, 255, 100);
				font-size: 30upx;
				text-align: center;
				box-shadow: 0px 0px 4upx 0px rgba(85, 119, 252, 100);
				font-family: Arial;
				border: 2upx solid rgba(0, 0, 0, 0.1);
			}
		}

	}
</style>
